<!DOCTYPE html>
<html lang="en">

<body>
  
    <svg viewBox="0 0 100 100" width="200" height="200">
       <circle cx="20" cy="20" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                from="30" 
                to="60"
                dur="3s"
                begin="btn6.click"
                restart="always"
                fill="freeze"/>
        </circle>
       <circle cx="20" cy="40" r="10" fill="#0f0">
            <animate 
                attributeName="cx"
                from="30" 
                to="60"
                dur="3s"
                begin="btn6.click"
                restart="whenNotActive"
                fill="freeze"/>
        </circle>
       <circle cx="20" cy="60" r="10" fill="#00f">
            <animate 
                attributeName="cx"
                from="30" 
                to="60"
                dur="3s"
                begin="btn6.click"
                restart="never"
                fill="freeze"/>
        </circle>

        <g style="cursor:pointer" id="btn6">
            <rect x="40" y="80" width="20" height="10" rx="5" ry="5" fill="#ccc" stroke="#000" />
            <text x="50"  y="87" font-size="6" text-anchor="middle">开始</text>
        </g>
    </svg>

    


</body>
</html>